<template>
  <div class="card bg-#fff p-32px" v-loading="loading">
    <div class="flex items-center mb-16px">
      <h2 class="font-size-24px fw-500 mr-22px">
        {{ props.data.demandTitle }}
      </h2>
      <span
        class="font-size-12px text-#fff lh-16px py-3px px-10px border-rd-2px"
        :style="tagBgStyle"
        >{{ tagName }}</span
      >
    </div>
    <div class="font-size-14px text-light">
      <span class="mr-35px"
        >生成时间：{{ props.data.createTime?.slice(0, 10) }}</span
      >
      <span class="mr-35px"
        >发布地点：{{ props.data?.provinceName }}
        {{ props.data?.cityName }}</span
      >
    </div>
    <div class="mt-40px">
      <h5 class="font-size-18px fw-500 mb-24px">资源信息</h5>
      <div class="content-inner">
        <div>
          <label>需求说明：</label>
          <div>{{ props.data.demandDesc }}</div>
        </div>
        <div>
          <label>联系人：</label>
          <div>
            {{ props.data.contactUser }}
          </div>
        </div>
        <div v-if="props.data.demandType===5">
          <label>品牌：</label>
          <div>
            {{ props.data.brandName }}
          </div>
        </div>
        <div v-if="props.data.demandType===5">
          <label>型号：</label>
          <div>
            {{ props.data.modelName }}
          </div>
        </div>
        <div>
          <label>联系方式：</label>
          <div>
            {{ props.data.contactUserMobile }}
            <el-button
              v-if="showPhoneDetailBtn"
              class="ml-12px"
              size="small"
              type="primary"
              @click="checkCompletePhone"
              >查看</el-button
            >
          </div>
        </div>
        <div>
          <label>需求时间：</label>
          <div>
            {{ props.data.demandBegin?.slice(0, 16) }} ~
            {{ props.data.demandEnd?.slice(0, 16) }}
          </div>
        </div>
        <div>
          <label>需求预算：</label>
          <div>{{ props.data.budgetPrice }} {{props.data.priceUnit}}</div>
        </div>
        <el-button
          v-if="showApplyBtn"
          type="primary"
          :loading="applyLoading"
          class="h-40px w-104px b-rd-2px mt-24px"
          @click="applyCooperation"
          >申请合作</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  SOURCE_TYPE_ENUM,
  SOURCE_TYPE_TAG_COLOR_ENUM,
  USER_TYPE_VALUE_ENUM,
} from "@/const";
import { useUserStore } from "@/store";
import { useLoading } from "@/hooks";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const { loading: applyLoading, setLoading } = useLoading();

const userStore = useUserStore();
const showPhoneDetailBtn = computed(() =>
  [
    USER_TYPE_VALUE_ENUM.SUPPLY_MANAGER,
    USER_TYPE_VALUE_ENUM.SUPPLY_SUB_MANAGER,
  ].includes(userStore.userInfo?.userType)
);

const tagName = computed(() => SOURCE_TYPE_ENUM[props.data.demandType]);
const tagBgStyle = computed(() => ({
  background: SOURCE_TYPE_TAG_COLOR_ENUM[props.data.demandType],
}));

const $api = inject("$api");
const checkCompletePhone = async () => {
  const { data: phone } = await $api.supply.checkCompletePhone({
    associateId: props.data.id,
    dataType: 1,
  });
  ElMessageBox.alert(phone, "联系电话", {
    showConfirmButton: false,
  });
};

const showApplyBtn = computed(
  () =>
    userStore.userInfo?.userId &&
    props.data.createUserId !== userStore.userInfo?.userId &&
    showPhoneDetailBtn.value
);

const route = useRoute();
const applyCooperation = async () => {
  setLoading(true);
  try {
    await $api.supply.applyDemand({
      resourceDemandId: route.query.id,
    });
    ElMessage.success("申请成功");
  } finally {
    setLoading(false);
  }
};
</script>
